<!DOCTYPE HTML>
<html lang="en">
  <head>
    <title>Android Users Mapping V1 Beta</title>
    <meta charset="utf-8">
	<link rel="stylesheet" media="screen" type="text/css" title="Design" href="globe.css" />
  </head>
  <body>

  <div id="container"></div>

  <div id="currentInfo">
    <span id="version2.1" class="version"></span>
    <span id="version2.2" class="version"></span>
    <span id="version2.3" class="version"></span>
  </div>

  <div id="title">
    Android Users Mapping
  </div>
  
  <div id="version_info">
  V1 Beta
  </div>
  
 <!--  <div id="stats">
  <a href="countryStats.php"><span>Statistics</span></a>
  </div> -->

  <div id="chrome">
  <span>This experiment is based on</span>
  <a href="http://www.chromeexperiments.com/globe"><span> Chome Globe experiment</span></a>
  </a>
  </div>

  <div id="info">  
  <span>This project is open-source</br></span>
  <a id="code" href="http://code.google.com/p/duinop/"><span>Let's hack the code</span></a>
  </div>
  
  <script type="text/javascript" src="third-party/Three/ThreeWebGL.js"></script>
  <script type="text/javascript" src="third-party/Three/ThreeExtras.js"></script>
  <script type="text/javascript" src="third-party/Three/RequestAnimationFrame.js"></script>
  <script type="text/javascript" src="third-party/Three/Detector.js"></script>
  <script type="text/javascript" src="third-party/Tween.js"></script>
  <script type="text/javascript" src="globe.js"></script>
  <script type="text/javascript">

	//Google code
    if(!Detector.webgl){ 
      Detector.addGetWebGLMessage();
    } else {

      var versions = ['2.1','2.2','2.3'];
      var container = document.getElementById('container');
      var globe = new DAT.Globe(container);
      console.log(globe);
      var i, tweens = [];

      var settime = function(globe, t) {
        return function() {
          new TWEEN.Tween(globe).to({time: t/versions.length},500).easing(TWEEN.Easing.Cubic.EaseOut).start();
          var v = document.getElementById('version'+versions[t]);
          if (v.getAttribute('class') === ' active') {
            return;
          }
          var vv = document.getElementsByClassName('version');
          for(i=0; i<vv.length; i++) {
            vv[i].setAttribute('class','version');
          }
          v.setAttribute('class', 'version active');
        };
      };

      for(var i = 0; i<versions.length; i++) {
        var v = document.getElementById('version'+versions[i]);
        v.addEventListener('mouseover', settime(globe,i), false);
      }

      var xhr;
      TWEEN.start();


      xhr = new XMLHttpRequest();
      xhr.open('GET', 'globeData.json', true);
      xhr.onreadystatechange = function(e) {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            var data = JSON.parse(xhr.responseText);
            window.data = data;
            for (i=0;i<data.length;i++) {
              globe.addData(data[i][1], {format: 'magnitude', name: data[i][0], animated: true});
            }
            globe.createPoints();
            settime(globe,0)();
            globe.animate();
          }
        }
      };
      xhr.send(null);
    }


  </script>

  </body>

</html>
